<template>
  <div data-v-c0824c82="" class="bg-f2">
    <ul data-v-c0824c82="" class="address-box pc-addContact-address-box">
      <li data-v-c0824c82="">
        <input
          data-v-c0824c82=""
          type="text"
          maxlength="5"
          placeholder="收货人"
          v-model="addressinfo.toName"
        />
      </li>
      <li data-v-c0824c82="">
        <input
          data-v-c0824c82=""
          type="tel"
          maxlength="11"
          placeholder="手机号码"
          oninput="this.value=this.value.replace(/[^0-9.]+/,'');"
          v-model="addressinfo.phone"
        />
      </li>
      <li data-v-c0824c82="" class="sel-box">
        <select
          data-v-c0824c82=""
          class="sel-box-select one-txt-cut"
          v-model="value1"
          @change="handlechange1(value1)"
        >
          <option data-v-c0824c82="" value="-1">请选择</option>
          <option
            data-v-c0824c82=""
            :value="item.provCode"
            v-for="(item, index) in lv1"
            :key="index"
          >
            {{ item.name }}
          </option>
        </select>
        <select
          data-v-c0824c82=""
          class="one-txt-cut"
          v-model="value2"
          @change="handlechange2(value2)"
        >
          <option data-v-c0824c82="" value="-1">请选择</option>
          <option
            data-v-c0824c82=""
            :value="item.provCode"
            v-for="(item, index) in lv2"
            :key="index"
          >
            {{ item.name }}
          </option>
        </select>
        <select data-v-c0824c82="" class="one-txt-cut" v-model="value3">
          <option data-v-c0824c82="" value="-1">请选择</option>
          <option
            data-v-c0824c82=""
            :value="item.provCode"
            v-for="(item, index) in lv3"
            :key="index"
          >
            {{ item.name }}
          </option>
        </select>
      </li>
      <li data-v-c0824c82="">
        <input
          data-v-c0824c82=""
          type="text"
          placeholder="详细地址"
          v-model="addressinfo.addressDetail"
        />
      </li>
    </ul>
    <ul data-v-c0824c82="" class="on-off-box">
      <li data-v-c0824c82="">
        <span data-v-c0824c82="">设为默认地址</span>
        <div data-v-c0824c82="" class="wrap">
          <input data-v-c0824c82="" type="checkbox" id="s3" />
          <label data-v-c0824c82="" for="s3" class="slider-v2"></label>
        </div>
      </li>
    </ul>
    <div data-v-c0824c82="" class="q-fix">
      <div
        data-v-c0824c82=""
        class="q-fix-btn"
        @click="handlesaveaddress"
        v-if="!isSave"
      >
        <span data-v-c0824c82="">保存</span>

        <!---->
      </div>
    </div>
  </div>
</template>

<script>
import {
  getaddresslist,
  getcitys,
  addaddress,
  editaddress,
} from "../../api/zl-goods";
export default {
  data() {
    return {
      addressinfo: {
          toName:'', phone:'', addressDetail:''
      },
      lv1: [],
      lv2: [],
      lv3: [],
      value1: "-1",
      value2: "-1",
      value3: "-1",
    };
  },
  created() {
    if (this.$route.params.state != -1) {
      getcitys("").then((res) => {
        this.lv1 = res.data.data;
        getaddresslist().then((res) => {
          this.addressinfo = res.data.data[this.$route.params.state];
          let { province, city, area } = this.addressinfo;
          this.value1 = province;
          getcitys(province).then((res) => {
            this.lv2 = res.data.data;
            this.value2 = city;
            getcitys(city).then((res) => {
              this.lv3 = res.data.data;
              this.value3 = area;
            });
          });
        });
      });
    }
    getcitys("").then((res) => {
      this.lv1 = res.data.data;
    });
  },
  methods: {
    handlechange1(cityid) {
      //一级联动改变时
      getcitys(cityid).then((res) => {
        this.lv2 = res.data.data;
        this.value2 = this.value3 = -1;
      });
    },
    handlechange2(cityid) {
      //二级联动改变时
      getcitys(cityid).then((res) => {
        this.lv3 = res.data.data;
        this.value3 = -1;
      });
    },
    handlesaveaddress() {
      //保存
      let { toName, phone, addressDetail } = this.addressinfo;
      let { value1, value2, value3 } = this;
      if (this.$route.params.state != -1) {
        let editinfo = {
          id: this.addressinfo.id,
          toName: toName,
          phoneNum: phone,
          province: value1,
          city: value2,
          area: value3,
          addressDetail: addressDetail,
          statusId: false,
        };
        editaddress(editinfo).then((res) => {
          if (res.data.code == "0000") {
            this.$toast.success(res.data.msg);
            this.$router.push("/children/address");
          }
        });
      } else {
        let saveinfo = {
          toName: toName,
          phoneNum: phone,
          province: value1,
          city: value2,
          area: value3,
          addressDetail: addressDetail,
          statusId: "0",
        };
        addaddress(saveinfo).then((res) => {
          if (res.data.code == "0000") {
            this.$toast.success(res.data.msg);
            this.$router.push("/children/address");
          }
        });
      }
    },
  },
  computed: {
    isSave() {
      let { toName, phone, addressDetail } = this.addressinfo;
      let { value1, value2, value3, lv3 } = this;
      let bool =
        toName == "" ||
        phone == "" ||
        addressDetail == "" ||
        value1 == -1 ||
        value2 == -1 ||
        value3 == -1;
      return bool;
    },
  },
};
</script>

<style lang="less" scoped>
</style>